<%--
  Created by IntelliJ IDEA.
  User: Maibenben
  Date: 2017/4/24
  Time: 18:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<link rel="stylesheet" href="css/header.css">
<script>
    $(function () {
        $(".show_header").sortable();
        $(".show_header").disableSelection();
    });
</script>
<header class="">
    <div>
        <ul class="show_header">
            <li class="header_home"><span class=""><a href="home.jsp" class="header_home_current header_current"><img
                    src="image/home_current.png" class="img_home_current">首页</a></span></li>
            <li class="header_hot">
                <span class="header_hot_current"><img src="image/hot.png" class="img_hot">热门</span>
                <ul class="hot_menu">
                    <li class="hot_menu_li"><a href="hot.jsp">热门影评</a></li>
                    <li class="hot_menu_li"><a href="hot.jsp">热门论坛</a></li>
                </ul>

            </li>
            <li class="header_forum"><span class=""><a href="forum.jsp" class="header_forum_current"><img
                    src="image/forum.png" class="img_forum">论坛</a></span></li>
            <li class="header_information"><span class="header_information_current"><img src="image/information.png"
                                                                                         class="img_information">信息</span>
            </li>
            <li class="header_set" style=""><span class="header_set_current"><img src="image/set.png" class="img_set">设置
                <!--<div class="header_set_ul">-->
                    <ul class="menu">
                        <li class="menu_li"><a href="setting/AccountSettings.jsp">账号设置</a></li>
                        <li class="menu_li"><a href="setting/Security.jsp">账号安全</a></li>
                        <!--<li class="list-line"></li>-->
                        <li class="menu_li"><a href="#">意见反馈</a></li>
                        <li class="menu_li"><a href="#">帮助中心</a></li>
                        <!--<li class="list-line"></li>-->
                        <li class="menu_li"><a href="logout">&nbsp;退出&nbsp;</a></li>
                    </ul>
                </span>
            </li>
        </ul>
    </div>
</header>
<script>
    $(function () {
        var menu = $('.menu');
        var hot_menu = $('.hot_menu');
        var header_hot = $('.header_hot');
        var header_set = $('.header_set');
        $(header_set).mouseenter(function (e) {
            var x = e.pageX;
//            alert(x);
            menu.css({left: 1545 + "px"});
//            menu.css({position:"fixed"});
            menu.show(100);
        });
        $(header_set).mouseleave(function () {
            menu.hide(100);
        })
        $(header_set).click(function () {
            if (menu.is(':hidden')) {
                menu.show(100);
            } else {
                menu.hide(100);
            }
        });
        $(menu).mouseleave(function () {
            menu.hide(100);
        });
        $(header_hot).mouseenter(function () {
            hot_menu.css({left: 1280 + "px"});
            hot_menu.show(100);
        });
        $(header_hot).mouseleave(function () {
            hot_menu.hide(100);
        })
        $(header_hot).click(function () {
            if (hot_menu.is(':hidden')) {
                hot_menu.show(100);
            } else {
                hot_menu.hide(100);
            }
        })
        $(hot_menu).mouseleave(function () {
            hot_menu.hide(100);
        });
        $('li').mouseenter(function () {
            $(this).addClass('current');
            $(this).siblings().removeClass('current');
        });
        $('li').mouseleave(function () {
            $('li').removeClass('current');
        })
        $('.show_header').mouseleave(function () {
            $('.show_header').removeClass('current');
        });
        var to_top = $('.go_to_top');
        $(to_top).click(function () {
            $('body').animate({scrollTop: 0}, 500);
        });
        $(window).scroll(function () {
            var sc = $(window).scrollTop();
            if (sc > 80) {
                $(to_top).show();
            } else {
                $(to_top).hide();
            }
            if (sc > 500) {
                $('.all_search').addClass('all_search_current');
            } else {
                $('.all_search').removeClass('all_search_current');
            }
        })
    });
</script>
